<template>
	<view class="content">
		<u-no-network></u-no-network>

		<view class="info shadow">
			<view class="info2">
				<text>案例名称</text>
				<input type="text" v-model="title" value="" placeholder="请输入案例名称 " class="inputStyle" />
			</view>
			<view class="info1 ">
				<text>总价</text>
				<input type="text" v-model="money" value="" placeholder="请输入总价" class="inputStyle" />
			</view>
			<view class="info2">
				<text>简介</text>
				<input type="digit" v-model="brief" value="" placeholder="请输入简介" class="inputStyle" />
			</view>

			<view class="info2">
				<text>活动类型</text>
				<input type="digit" v-model="act_type" value="" placeholder="请输入活动类型 " class="inputStyle" />
			</view>
			<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>

			<view class="info2" @click="openPiker">
				<text>活动时间</text>
				<input type="digit" v-model="act_time" disabled value="" placeholder="请输入活动时间 " class="inputStyle" />
			</view>
		</view>
		<view class="shop shadow">
			<text>封面图</text>
			<u-upload
				ref="uUpload"
				max-count="1"
				:action="action"
				:auto-upload="true"
				@on-success="success()"
				width="190rpx"
				height="190rpx"
				multiple
			></u-upload>
		</view>
		<view class="shop shadow">
			<view class="info2">
				<text>详情</text>
				<textarea
					type="text"
					v-model="content"
					value=""
					placeholder="请输入详情 "
					class="inputStyle padding r margin-top"
					style="width: 100%; border: 1rpx solid #f5f8fd;"
				/>
			</view>
			<u-upload
				ref="uUpload"
				:action="action"
				:auto-upload="true"
				@on-success="success1"
				width="190rpx"
				height="190rpx"
				multiple
				:file-list="fileList1"
			></u-upload>
		</view>
		<!--  animation-scale-up-->
		<view class="applyToSettleIn"><button type="default " @click="addCse">添加案例</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			an: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
			},
			action: 'https://wumei.qianjitianxia.com/api/upload/upload',
			cover: '',
			show: false,
			title: '',
			money: '',
			brief: '',
			content: '',
			act_type: '',
			act_time: '',
			content_img:[]
		};
	},

	onLoad(e) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		confirm(e) {
			this.act_time = `${e.year}-${e.month}-${e.day} ${e.hour}-${e.minute}`;
			console.log('this.act_time :>> ', this.act_time);
		},
		openPiker() {
			this.show = true;
		},
		success(index, list) {
			this.cover = index.url;
		},
		success1(index, list) {
			this.content_img.push(index.url)
		},
		/* 添加案例 */
		async addCse() {
			this.an = true;
			setTimeout(() => {
				this.an = false;
			}, 500);
			if (!this.title) return uni.$showMsg('请输入案例名称 !');
			if (!this.money) return uni.$showMsg('请输入总价 !');
			if (!this.brief) return uni.$showMsg('请输入简介 !');
			if (!this.content) return uni.$showMsg('请输入案例详情 !');
			if (!this.act_type) return uni.$showMsg('请输入活动类型 !');
			if (!this.act_time) return uni.$showMsg('请输入活动时间 !');
			if (!this.cover) return uni.$showMsg('请上传封面图 !');
			if (!this.content_img) return uni.$showMsg('请上传案例图 !');
			// content_img

			uni.$showLoading();
			let obj = {
				uid: uni.getStorageSync('uid'),
				dj_id: uni.getStorageSync('did'),
				title: this.title,
				money: this.money,
				brief: this.brief,
				content: this.content,
				act_type: this.act_type,
				act_time: this.act_time,
				cover: this.cover,
				content_img: this.content_img,
			};

			const res = await this.$u.post('api/shop/shop_details', obj, {});
			if (!res.code) return uni.$showMsg(res.msg);

			uni.$showMsg(res.msg);
			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
				});
			}, 300);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	input {
		padding-left: 20rpx;
	}
	.shop {
		width: 690rpx;
		// height: 282rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 31rpx;
		margin-top: 20rpx;
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.info {
		width: 690rpx;
		// height: 450rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 20rpx 31rpx;
		.verificationCd {
			position: relative;
			.countdown {
				position: absolute;

				right: 50rpx;

				width: 110rpx;
				height: 60rpx;
				border-radius: 35rpx;
				//background-color: #007aff;
			}
		}

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;

			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 99rpx;
			width: 690rpx;
			height: 100rpx;
			background: #ff1a14;
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
